<template>
  <div id="util">
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/qweather-icons@1.1.1/font/qweather-icons.css"
    />
    <el-row type="flex" :gutter="5">
      <el-col :span="12"
        ><div>
          <el-card
            class="box-card"
            v-loading="weatherLoading"
            style="border-radius: 10px; background-color: #ffffffad; padding: 5px"
          >
            <div>
              <el-descriptions
                class="margin-top"
                title="天气信息速查"
                :column="4"
              >
                <template slot="extra">
                  <el-select
                    v-model="selectedLocation"
                    filterable
                    placeholder="请选择或者检索位置"
                    style="float: right"
                    size="small"
                    @change="changeLocation"
                  >
                    <el-option
                      v-for="item in locations"
                      :key="item.locationId"
                      :label="item.areaName"
                      :value="item.locationId"
                    >
                      <span style="float: left">{{ item.areaName }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                        >{{ item.cityName }}</span
                      >
                    </el-option>
                  </el-select>
                </template>
                <el-descriptions-item label="当前天气"
                  >{{ weatherInfo.text }}<i :class="weatherInfo.fontIcon"></i
                ></el-descriptions-item>
                <el-descriptions-item label="风向">{{
                  weatherInfo.windDir
                }}</el-descriptions-item>
                <el-descriptions-item label="风力(级)">{{
                  weatherInfo.windScale
                }}</el-descriptions-item>
                <el-descriptions-item label="风速(公里/时)">
                  {{ weatherInfo.windSpeed }}
                </el-descriptions-item>
                <el-descriptions-item label="温度(摄氏度)">{{
                  weatherInfo.temp
                }}</el-descriptions-item>
                <el-descriptions-item label="体感温度(摄氏度)">{{
                  weatherInfo.feelsLike
                }}</el-descriptions-item>
                <el-descriptions-item label="相对湿度">{{
                  weatherInfo.humidity
                }}</el-descriptions-item>

                <el-descriptions-item label="气压(百帕)">{{
                  weatherInfo.pressure
                }}</el-descriptions-item>
              </el-descriptions>

              <el-descriptions
                class="margin-top"
                title="最新的气象预警"
                :column="2"
              >
              </el-descriptions>
                <el-collapse v-model="activeName" accordion>
                    <el-collapse-item :title="item.title" :name="item.index" v-for="(item, index) in alertInfo" :key="index">
                        <p style="text-align: left">{{item.text}}</p>
                    </el-collapse-item>
                </el-collapse>

            </div>
          </el-card>
        </div></el-col
      >
      <el-col :span="2"><div></div></el-col>
      <el-col :span="12"><div></div></el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "@/util/AxiosUtil";
import apis from "@/util/ApiUrls";
import axiosStatic from "axios"; // 原始的axios
export default {
  name: "UtilComponent",
  created() {
    // 获取和风天气API所需的位置信息
    this.weatherLoading = true;
    // 聚合请求 获取地理位置和请求key
    axiosStatic
      .all([
        axios.get(apis.api_component.locations),
        axios.get(apis.api_component.qweatherKey),
      ])
      .then(
        axiosStatic.spread((locationRes, keyRes) => {
          this.locations = locationRes.data;
          this.qweatherKey = keyRes.data;
        })
      )
      .catch((e) => {
        this.$notify({
          title: "警告:获取天气核心数据失败",
          message: e.msg,
          type: "warning",
          duration: 1300,
        });
      })
      .finally(() => {
        this.weatherLoading = false;
      });
  },
  methods: {
    // 切换位置获取实时天气
    changeLocation(locationId) {
      // https://devapi.qweather.com/v7/weather/now?
      this.weatherLoading = true;
      // 清空信息
      this.alertInfo = [];
      this.weatherInfo = {};

      axiosStatic
        .all([
          axiosStatic.get(
            "https://devapi.qweather.com/v7/weather/now?location=" +
              locationId +
              "&key=" +
              this.qweatherKey
          ),
          axiosStatic.get(
            "https://devapi.qweather.com/v7/warning/now?location=" +
              locationId +
              "&key=" +
              this.qweatherKey
          ),
        ])
        .then(
          axiosStatic.spread((weatherRes, alertRes) => {
            // 天气信息
            let weatherData = weatherRes.data;
            if (weatherData.code === "200") {
              this.weatherInfo = { ...this.weatherInfo, ...weatherData.now };
              this.weatherInfo.fontIcon = "qi-" + this.weatherInfo.icon;
            } else {
              return Promise.reject({ msg: "获取天气信息异常" });
            }

            // 预警信息
            let alertData = alertRes.data;
            if (alertData.code === "200") {
              this.alertInfo = alertData.warning ?? [];
            } 
          })
        )
        .catch((e) => {
          this.$notify({
            title: "警告:获取实时天气信息失败",
            message: e.msg,
            type: "warning",
            duration: 1300,
          });
        })
        .finally(() => {
          this.weatherLoading = false;
        });
    },
  },
  data() {
    return {
      weatherLoading: false, // 天气组件的加载框
      selectedLocation: "", // 选中的位置
      locations: [], // 天气数据的位置
      qweatherKey: "", // 和风天气API的认证key
      weatherInfo: {
        // 天气信息
        text: "", // 天气情况, 多云、小雨
        windDir: "", // 风向
        windSpeed: "", // 风速 公里/小时
        windScale: "", // 风力等级
        humidity: "", // 相对湿度
        pressure: "", // 大气压强
        temp: "", // 温度
        feelsLike: "", // 体感温度
        obsTime: "", // 数据观测时间
        icon: "", // 图标代码
        fontIcon: "", // 图标代码的class值(转换后)
      },
      alertInfo: [],
      activeName: "", // 气象预警激活的面板
    };
  },
};
</script>
<style scope>
#util .el-descriptions__body {
  background-color: #fff0;
}

#util div.el-collapse-item__header {
  background-color: #e9eec8;
}

#util div.el-collapse-item__wrap {
  background-color: #ffffffab;
}

#util input.el-input__inner {
  background-color: #f0edc4;
}

</style>